<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Search Results</title>
    <meta name="description" content="">
    <meta name="author" content="">
	<script type='text/javascript' src="scripts/jquery-1.7.1.min.js"></script>
	<script type='text/javascript' src="scripts/core.js"></script>
	<link href="styles/tweetgraph.css" type="text/css" rel="stylesheet" />
	<link href="styles/bootstrap.css" type="text/css" rel="stylesheet" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
	<script src="scripts/jquery-1.7.1.js" type="text/javascript"></script>
	<script src="scripts/jquery.timer.js" type="text/javascript"></script>
	<script src="scripts/highcharts.js" type="text/javascript"></script>
	<script src="scripts/json2.js" type="text/javascript"></script>

	<%
		String hashTag = (String)request.getAttribute("hashTag");
		if(hashTag == null){
			hashTag = request.getParameter("hashTag");
		}
		String name = (String)request.getAttribute("name");
		if(name == null){
			name = request.getParameter("name");
		}		
	%>
	<script type="text/javascript">
	
   	$.ajaxSetup ({
		cache: false
	});
	

	var chart;
	var chart1; // globally available
	var arrayForBarData = [];
	var arrayForBarCats = [];
	var timerId = 0;
	
	$(document).ready(function() {	
		getData(true);
		
		//timer.play();
		//window.setTimeOut('startUpdate()',4000);
		//timerId=window.setInterval('getData(false)', 3000);
//		window.setTimeOut('stopData()',60000);
		});

		function startUpdate(){
			//timerId=window.setInterval('getData(false)', 2000);
		}
		function stopData(){
			alert("stopping the interval");
			clearInterval(timerId);
		}
		
		function getData(animate) {
		    $.ajax(
				{
				    type: "GET",
				    dataType: "JSON",
				    accepts: "JSON",
				    url: "/resultsprocessor",
				    data: "hashTag=<%=hashTag%>",
				    success: function (data) {
				        //console.log(data);
						var topArray = [];
						count = 0;
				        $.each(data, function(key, value) {
							var innerArray = [];

							innerArray[0] = key;
							innerArray[1]=parseInt(value);

							arrayForBarData[count] = innerArray[1];
							arrayForBarCats[count] = innerArray[0];

							topArray[count] = innerArray;
							count++;
						});
						if(animate == false){
							loadChart(topArray,animate);
							loadBar(arrayForBarData,arrayForBarCats,animate);
						}else{
							loadChartInit(topArray);
							loadBarInit(arrayForBarData,arrayForBarCats);
						}
				    }
				});
		}
		
		
		function loadBarInit(arrayForBarData,arrayForBarCats,animate){
				  chart1 = new Highcharts.Chart({
			 chart: {
				renderTo: 'containerbar',
				type: 'bar'
			 },
			 title: {
				text: ' '
			 },
			 xAxis: {
//				categories: ['Apples', 'Bananas', 'Oranges']
				categories: arrayForBarCats
			 },
			 yAxis: {
				title: {
				   text: 'Count'
				}
			 },
			 series: [{
				showInLegend: false,
				name: '',
				//data: [1, 0, 4],
				data: arrayForBarData,
				animation: {
					duration:2000
				}
			 }]
		  });
		}
		
			
		function loadBar(arrayForBarData,arrayForBarCats,animate){
				  chart1 = new Highcharts.Chart({
			 chart: {
				renderTo: 'containerbar',
				type: 'bar'
			 },
			 title: {
				text: ' '
			 },
			 xAxis: {
//				categories: ['Apples', 'Bananas', 'Oranges']
				categories: arrayForBarCats
			 },
			 yAxis: {
				title: {
				   text: 'Count'
				}
			 },
			 series: [{
				showInLegend: false,
				name: '',
				//data: [1, 0, 4],
				data: arrayForBarData,
				animation: animate
			 }]
		  });
		}
			
		function loadChartInit(topArray,animate){
			
			
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerpie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: '<%=name%>'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 0, ',') +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							showInLegend:true,
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 0, ',') +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: '<%=name%>',
						data: topArray,
						animation: {
							duration:2000
						}
					}]
				});
			}

		function loadChart(topArray){
			
			
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'containerpie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: '<%=name%>'
					},
					tooltip: {
						formatter: function() {
							return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 0, ',') +' %';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							showInLegend:true,
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 0, ',') +' %';
								}
							}
						}
					},
				    series: [{
						type: 'pie',
						name: 'Browser share',
						data: topArray,
						animation:false
					}]
				});
			}
			
			
			function refreshResults(){
			    $.ajax(
						{
						    type: "GET",
						    dataType: "JSON",
						    accepts: "JSON",
						    url: "/twittersearch",
						    data: "hashTag=<%=hashTag%>",
						    success: {}
						});
			}
			
			function refreshGraphs(){
				getData(false);
			}
	</script>
     <link href="styles/bootstrap.css" rel="stylesheet">
  </head>

  <body>
<div id="main">
 	<div id="header">
		<a href="index.html"><img src="images/logo.png" class="logo"></a>
		<ul id="top_nav">
			<li><a href="index.html">Home</a></li>
			<li><a href="signup.html">Sign Up</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
    <div class="container">
 	         <h4>Query Results</h4>
	         <p>Results for Twitter query <b>#<%=hashTag %></b></p>
	         <p><a class="btn btn-primary btn-large" href="javascript:refreshResults()">Re-Run Twitter Search&raquo;</a>
	         <a class="btn btn-primary btn-large" href="javascript:refreshGraphs()">Refresh Graph&raquo;</a>
	         </p>
 	
		<table border=0 width=100%>
			<tr><td align=center>
					<div id="containerbar" style="width: 400px; height: 400px"></div>  
				</td><td align=center>
					<div id="containerpie" style="width: 500px; height: 400px"></div> 
				</td>
			</tr>
		</table>
    </div> <!-- /container -->
	<div class="clear"></div>
	<div id="footer">
		<ul id="bottom_nav">
			<li>Copyright &copy; 2012</li>
		</ul>
	</div>    
</div>
  </body>
</html>
